<template>
  <!-- 表单 -->
  <el-form ref="addForm" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="姓名" prop="username">
          <el-input v-model="formData.username" style="width:50%" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
          <el-input v-model="formData.mobile" style="width:50%" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="入职时间" prop="timeOfEntry">
          <el-date-picker v-model="formData.timeOfEntry" style="width:50%" placeholder="请选择入职时间" />
      </el-form-item>
      <el-form-item label="聘用形式" prop="formOfEmployment">
          <el-select v-model="formData.formOfEmployment" style="width:50%" placeholder="请选择">
            <el-option v-for="item in employeeObj" :key="item.id" :value="item.id" :label="item.value"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="工号" prop="workNumber">
          <el-input v-model="formData.workNumber" style="width:50%" placeholder="请输入工号" />
      </el-form-item>
      <el-form-item label="部门" prop="departmentName">
      <el-input @focus="departmentNameFocusFn" v-model="formData.departmentName" style="width:50%" placeholder="请选择部门" />
        <!-- 树形控件(像自己在做下拉框一样) -->
        <el-tree v-show="showTree" :data="departentList" :props="{label:'name'}"   @node-click="handleNodeClick"></el-tree>
      </el-form-item>
      <el-form-item label="转正时间" prop="correctionTime">
          <el-date-picker v-model="formData.correctionTime" style="width:50%" placeholder="请选择转正时间" />
      </el-form-item>
      <el-form-item>
          <el-button @click="cancelFn">取消</el-button>
          <el-button type="primary" @click="confirmFn">确定</el-button>
      </el-form-item>
  </el-form>
</template>

<script>
  import employeeObj from '../formatter.js'
export default {
  name: 'EmpForm',
  props: {
    departentList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    // 侦听 departmentName 部门名字变化
    // 1 用户输入时能触发
    // 2 用户在点击 el-tree 时也能触发
    // 3 表单置空时也会触发
    // 检测-用户在页面修改后赋予的新值(newVal)
    'formData.departmentName'(newVal){
      if(newVal.length == 0){ // 清空表单后才会进入这里判断,一开始是不会进入的,因为没有深度监听
        // 防止重置表单后,值改变了,再次走下面代码进行赋值
        return
      }
      if(newVal !== this.selectedDepartmentName){ // 证明用户在输入框修改了值
        this.formData.departmentName = this.selectedDepartmentName // 立刻把用户改的,覆盖掉
        this.$message('该页面禁止修改部门名字','warning')
      }
    }
  },
  data(){
    return {
     // 添加表单字段
      formData: {
        username: '', // 用户名
        mobile: '', // 手机号
        formOfEmployment: '', // 聘用形式
        workNumber: '', // 工号
        departmentName: "", // 部门
        timeOfEntry: '', // 入职时间
        correctionTime: '' // 转正时间
      },
      employeeObj: employeeObj.hireType, // 聘用形式枚举数组+对象
      showTree: false, // 树形控件显示控制变量
      selectedDepartmentName: '', // 已选择的部门名字(拿来屏蔽输入框时使用)
       // 添加表单的校验字段
      rules: {
        username: [
          { required: true, message: '用户姓名不能为空', trigger: 'blur' },
          { min: 1, max: 4, message: '用户姓名为1-4位', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        formOfEmployment: [
          { required: true, message: '聘用形式不能为空', trigger: 'blur' }
        ],
        workNumber: [
          { required: true, message: '工号不能为空', trigger: 'blur' }
        ],
        departmentName: [
          { required: true, message: '部门不能为空', trigger: 'change' }
        ],
        timeOfEntry: [
          { required: true, message: '请选择入职时间', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    cancelFn(){
      this.$emit('update:show',false)
    },
    confirmFn(){
      this.$refs.addForm.validate(valid => {
        if(valid){
          // 派发事件执行添加操作
          // 深拷贝第一层数据,因为 addEmployeeEV 是异步事件,关闭dialog 是同步事件,同步事件执行完 表单对象就被清空了这时传出去的对象是一个空对象,所以提前复制好
          this.$emit('addEmployeeEV',{...this.formData})
          this.$emit('update:show',false)
        }
      })
    },
    // 部门名字输入框被选中时的事件
    departmentNameFocusFn(){
      this.showTree = true
    },
    // 树形控件节点点击时触发的事件
    // data: 点击的那一行对应的数据对象(该方法是el-tree的内置方法)
    handleNodeClick(data){
      // 问题: 在有部门子节点的情况下,我想折叠起该节点,而不是选中该部门父节点时怎么办?
      if(data && data.children){
        // 有子节点点击时证明是想折叠,而不是赋值给表单对象
        // 因为部门有部门专用的页面管理
        // 点击在了折叠的行上
        return
      }
      // 点击哪个节点,该节点的值就赋予给表单对象
      this.formData.departmentName = data.name
      // 备份一份在data,做屏幕输入校验
      this.selectedDepartmentName = data.name
      // 关闭树形控件
      this.showTree = false
      // console.log(data)
    }
  }
}
</script>

<style lang="scss" scoped></style>
